<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation" style="background:none;position: relative;z-index: 10;">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">基础代谢计算</view>
				<!-- <view class="right_box" @tap="openSt">
                    <view class="st_btn" v-if="VER.ver">声明与文献</view>
				</view> -->
			</view>
		</view>
		<view class="top-background">
			<view class="top-background-mask"></view>
		</view>
		<view style="height: 20rpx;"></view>
		<view class="synopsis-text">基础代谢(basal metabolism，BM)是指人体维持生命的所需的最低能量需要。</view>
		<view class="synopsis-text">测定方法是人体在清醒而又极端安静的状态下，不受肌肉活动、环境温度、食物及精神紧张等影响时的能量代谢率。</view>
		<view class="bottom-content">
			<view class="content-form">
				<view class="form-item d-flex a-center j-between" style="height: 180rpx;">
					<view class="form-item-title">性别</view>
					<view class="d-flex a-center" style="padding-right: 10rpx;">
						<view @tap="formData.sex=1" class="d-flex d-c a-center j-center" style="margin-right: 120rpx;">
							<image class="item-sex-image" :src="formData.sex==1?'../../static/userinfo/nan-z.png':'../../static/userinfo/nanw.png'"></image>
							<view :class="formData.sex==1?'form-item-value':'form-item-placeholder'">男</view>
						</view>
						<view @tap="formData.sex=2" class="d-flex d-c a-center j-center">
							<image class="item-sex-image" :src="formData.sex==2?'../../static/userinfo/nv-z.png':'../../static/userinfo/nvw.png'"></image>
							<view :class="formData.sex==2?'form-item-value':'form-item-placeholder'">女</view>
						</view>
					</view>
				</view>
				<view @tap="showBirthdayPopup" class="form-item d-flex a-center j-between">
					<view class="form-item-title">出生日期</view>
					<view class="d-flex a-center">
						<view v-if="formData.birthday==null" class="form-item-placeholder">请选择出生日期</view>
						<view v-else class="form-item-value">{{formData.birthday}}</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
				<view @tap="showHeightPopup" class="form-item d-flex a-center j-between">
					<view class="form-item-title">身高</view>
					<view class="d-flex a-center">
						<view v-if="formData.stature==null" class="form-item-placeholder">请选择身高</view>
						<view v-else class="form-item-value">{{formData.stature}}cm</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
				<view @tap="showCurrentWeight" class="form-item d-flex a-center j-between">
					<view class="form-item-title">当前体重</view>
					<view class="d-flex a-center">
						<view v-if="formData.currentWeight==null" class="form-item-placeholder">请选择当前体重</view>
						<view v-else class="form-item-value">{{formData.currentWeight}}kg</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
				<view @tap="showAimWeight" class="form-item d-flex a-center j-between">
					<view class="form-item-title">目标体重</view>
					<view class="d-flex a-center">
						<view v-if="formData.aimWeight==null" class="form-item-placeholder">请选择目标体重</view>
						<view v-else class="form-item-value">{{formData.aimWeight}}kg</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
				<view @tap="showExercise" class="form-item d-flex a-center j-between">
					<view class="form-item-title">每日运动量</view>
					<view class="d-flex a-center">
						<view v-if="formData.exercise==null" class="form-item-placeholder">请选择每日运动量</view>
						<view v-else class="form-item-value">{{formData.exercise}}</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
				<view @tap="showWeek" class="form-item d-flex a-center j-between">
					<view class="form-item-title">目标达成时间</view>
					<view class="d-flex a-center">
						<view v-if="formData.week==null" class="form-item-placeholder">请选择目标达成时间</view>
						<view v-else class="form-item-value">{{formData.week}}周</view>
						<i class="icon icon-more-2" style="font-size: 20rpx;color: #CCCCCC;margin-left: 10rpx;"></i>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-btn d-flex a-center j-center">
		<tm-button
			_style="margin: 0;font-weight: 500;"
			:width="690"
			:height="80"
			:shadow="-1"
			round="5"
			:linear-color="['#64F1C5', '#29DBA3']"
			linear="left"
			:fontSize="32"
			fontColor="#ffffff"
			label="查看计算结果"
			@tap="submit"
		></tm-button>
		<!--出生日期选择-->
		<datepicker ref="birthdayPopup" @onGetDate="onGetDate"></datepicker>
		<!--身高选择-->
		<height ref="heightPopup" @onGetHeight="onGetHeight" />
		<!--当前体重选择-->
		<weight ref="currentWeightPopup" @onGetWeight="onGetCurrentWeight" />
		<!--目标体重选择-->
		<weight ref="aimWeightPopup" @onGetWeight="onGetAimWeight" />
		<!--运动量选择-->
		<exercise ref="exercisePopup" @onExercise="onExercise" />
		<!--目标达成时间选择-->
		<week ref="weekPopup" @onWeek="onWeek" />

        <statement ref="stPopup"></statement>
	</view>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import datepicker from "./components/datepicker.vue";
import height from "./components/height.vue";
import weight from "./components/weight.vue";
import exercise from "./components/exercise.vue";
import week from "./components/week.vue";
import BigNumber from "bignumber.js";
import statement from "@/components/statement.vue";
import { ver } from "@/store/ver";
const VER = ver();
const stPopup = ref(null);
const openSt = ()=>{
    stPopup.value.open();
}

const formData:any = ref({
	sex:1
});
const goBack = () => {
	uni.navigateBack();
};
//出生日期选择相关
const birthdayPopup = ref();
const showBirthdayPopup = () => {
    //传默认日期
    birthdayPopup.value.showPopup(formData.value.birthday);
};
const onGetDate = (e: any) => {
    formData.value.birthday = e;
};
//身高选择
const heightPopup = ref();
const showHeightPopup = () => {
    heightPopup.value.showPopup(formData.value.stature);
};
const selectedHeight: any = ref({ id: 0 });
const onGetHeight = (e: any) => {
    selectedHeight.value = e + "cm";
    formData.value.stature = e;
};

//初始体重选择
const currentWeightPopup = ref();
const showCurrentWeight = () => {
    let params = {
        title: "当前体重",
        initialVlue: formData.value.currentWeight,
    };
    currentWeightPopup.value.showPopup(params);
};
const onGetCurrentWeight = (e: any) => {
	if(formData.value.currentWeight!=e){
		formData.value.week = null;
	}
    formData.value.currentWeight = e;
};

//目标体重选择
const aimWeightPopup = ref();
const showAimWeight = () => {
    let params = {
        title: "目标体重",
        initialVlue: formData.value.aimWeight,
    };
    aimWeightPopup.value.showPopup(params);
};
const onGetAimWeight = (e: any) => {
	if(formData.value.aimWeight!=e){
		formData.value.week = null;
	}
    formData.value.aimWeight = e;
	
};

//运动量选择
const exercisePopup = ref();
const showExercise = () => {
    exercisePopup.value.showPopup(formData.value.exercise);
};
const onExercise = (e: any) => {
    formData.value.exercise = e;

};

//目标达成时间选择
const weekPopup = ref();
const showWeek = () => {
	if(formData.value.currentWeight==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择当前体重",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.aimWeight==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择目标体重",
		    duration: 1500,
		});
		return;
	}
	if(Number(formData.value.aimWeight)>=Number(formData.value.currentWeight)){
		uni.showToast({
		    icon: "none",
		    title: "目标体重必须小于当前体重",
		    duration: 1500,
		});
		return;
	}
	
	let difference = new BigNumber(formData.value.currentWeight).minus(new BigNumber(formData.value.aimWeight)).toNumber();
	let maxWeek = Math.ceil(new BigNumber(difference).div(new BigNumber(0.5)).toNumber());
	let minWeek = Math.ceil(new BigNumber(difference).div(new BigNumber(1)).toNumber());
	weekPopup.value.showPopup(minWeek,maxWeek,difference,formData.value.week);
}
const onWeek = (e: any) => {
    formData.value.week = e;
};
const submit = () => {
	if(formData.value.sex==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择性别",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.birthday==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择出生日期",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.stature==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择身高",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.currentWeight==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择当前体重",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.aimWeight==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择目标体重",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.exercise==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择每日运动量",
		    duration: 1500,
		});
		return;
	}
	if(formData.value.week==null){
		uni.showToast({
		    icon: "none",
		    title: "请选择目标达成时间",
		    duration: 1500,
		});
		return;
	}
	uni.navigateTo({
	    url: `/pages/metabolizeCountResult/metabolizeCountResult?data=${JSON.stringify(formData.value)}`,
	});
}
</script>

<style lang="scss" scoped>
@import './metabolizeCount.scss';
</style>

